<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>YUI Container - Panel: Quickstart (YUI Library)</title>

	<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">

	<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css">
	<link type="text/css" rel="stylesheet" href="../assets/style.css">
</head>

<body>

	<div id="doc3" class="yui-t5">
		<div id="hd">
			<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
			<h1>YUI Container: Panel: Quickstart</h1>
		</div>

		<div id="bd">

					<div id="toc" class="yui-b">
			<ul>
				<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>

<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
<li class="item selected"><a href="1.html">Panel: Quickstart</a></li>
<li class="child active"><a href="1.html">Setting up the Panel</a></li>
<li class="child"><a href="2.html">Functional Example</a></li>
<li class="item"><a href="../skin/1.html">Panel: Skinning</a></li>
<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
			</ul>
		</div>
			<div id="yui-main">
				<div class="yui-b">
					<h1 class="first">Setting up the Panel</h1>

								<p>The Panel control is an extension of Overlay that is meant to behave similarly to an OS window. Unlike true browser popup windows, panels are floating DHTML elements embedded directly within the page context. The Panel control extends the functionality of Overlay, adding support for modality, drag and drop, and close/dismiss buttons. Panel includes a pre-defined stylesheet to support default look and feel characteristics.</p>

			<p>In this tutorial, we will build two Panels. One of them will be based on existing markup; the other will be created dynamically using script. We'll pass configuration properties via the constructor to specify any non-default settings we want to use in our Panel instances.</p>

			<textarea name="code" class="JScript" cols="60" rows="1">
					// Instantiate a Panel from markup
					YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { width:"300px", visible:false, constraintoviewport:true } );
					YAHOO.example.container.panel1.render();

					// Instantiate a Panel from script
					YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, draggable:false, close:false } );
					YAHOO.example.container.panel2.setHeader("Panel #2 from Script");
					YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
					YAHOO.example.container.panel2.setFooter("End of Panel #2");
					YAHOO.example.container.panel2.render(document.body);
			</textarea>

			<p>These Panels introduce a few configuration properties. The "constraintoviewport" property, when set to true, will keep the Panel from being positioned outside of the viewport; this defends against the panel being dragged out of the viewport by the user and against the panel being moved outside the viewport by scripted changes to its x/y properties. The "draggable" property determines whether the Panel can be dragged, and the "close" property determines whether the close icon should be displayed in the header of the Panel.</p>

			<p>The "context" property takes an array of arguments. The first argument in the array is the id of the element to which we want to anchor our Panel. In this case, that element is a div with an id of "ctx". The next two arguments specify the positioning of the Panel &mdash; "tl" and "bl" mean, "Anchor my Panel's <em>t</em>op <em>l</em>eft corner to my context element's <em>b</em>ottom <em>l</em>eft corner." (Other possible values include "tr" and "br" for "top right" and "bottom right", respectively.)</p>

			<p>The markup for "panel1" is in standard module format, as is required by the Module and Overlay classes on which Panel is built. We also provide buttons to allow for easy showing and hiding of both Panels:</p>

			<textarea name="code" class="HTML" cols="60" rows="1">

				<div>
					<button id="show1">Show panel1</button> 
					<button id="hide1">Hide panel1</button>
				</div>

				<div id="panel1">
					<div class="hd">Panel #1 from Markup</div>
					<div class="bd">This is a Panel that was marked up in the document.</div>
					<div class="ft">End of Panel #1</div>
				</div>

				<div>
					<button id="show2">Show panel2</button> 
					<button id="hide2">Hide panel2</button>
				</div>

			</textarea>
					<div id="stepnav">
						<a class="next" href="2.html">Continue to <em>Functional Example</em> &gt;</a>					</div>
				</div>
			</div>

		</div>

		<div id="ft">&nbsp;</div>
	</div>	

	<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
	<script language="javascript"> 
		dp.SyntaxHighlighter.HighlightAll('code'); 
	</script>

</body>
</html>